<template>
  <div id="">
    <div class="container">
      <div class="header">
        <div class="search">
          <el-select v-model="userId" placeholder="请选择">
            <el-option
                v-for="item in userSelect"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
        <el-button type="primary"  class="btn" @click="searchVideo">查询</el-button>
      </div>
      <div class="content">
        <div class="tableWrapper">
          <el-table
              :header-row-style="HeaderStyle"
              :row-style='cellStyle'
              :data="addTableData"
              border
              ref="multipleTable"
              style="width: 100%"
              tooltip-effect="dark">
            <el-table-column
                label="排序编号"
                align="center"
                type="index"
                width="100">
            </el-table-column>
            <el-table-column
                align="center"
                label="识别人"
                prop="userName"
                show-overflow-tooltip
                width="">
            </el-table-column>
            <el-table-column
                align="center"
                label="识别时间"
                prop="discernTime"
                show-overflow-tooltip
                width="">
            </el-table-column>
            <el-table-column
                align="center"
                class="title"
                label="top1"
                prop="t1Val"
                show-overflow-tooltip
                width=""
            >
            </el-table-column>
            <el-table-column
                align="center"
                label="prob1"
                prop="t1Prob"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                align="center"
                class="title"
                label="top2"
                prop="t2Val"
                show-overflow-tooltip
                width=""
            >
            </el-table-column>
            <el-table-column
                align="center"
                label="prob2"
                prop="t2Prob"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                align="center"
                class="title"
                label="top3"
                prop="t3Val"
                show-overflow-tooltip
                width=""
            >
            </el-table-column>
            <el-table-column
                align="center"
                label="prob3"
                prop="t3Prob"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                align="center"
                label="操作"
                prop=""
                width="200">
              <template slot-scope="scope">
                <span  class="pointer" @click="upData(scope.row)">查看</span><i class="line"></i><span
                  class="pointer" @click="showDeleteDialog(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <Pagination class="pagination" @handleCurrentChange="handleCurrentChange" :total="total"></Pagination>
      </div>
      <!--  新增    -->
      <Dialog :is-show-dialog="this.isShowAddDialog" @close="close" title="新增信息">
        <div slot="content">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
              <el-col :span="12">
                <el-form-item label="视频名称" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="排序编号" prop="sortNo">
                  <el-input v-model="ruleForm.sortNo"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="IP" prop="ip">
                  <el-input v-model="ruleForm.ip"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="流地址" prop="address">
                  <el-input v-model="ruleForm.address"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="账号" prop="loginName">
                  <el-input v-model="ruleForm.loginName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="密码" prop="password">
                  <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="经度">
                  <!-- <el-input v-model="ruleForm.lon"></el-input> -->
                  <LonLat ref="lonRef" @child-event="lonEvent"  v-if ="isReady" :msg-val="chilLon"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="纬度">
                  <LonLat ref="latRef" @child-event="latEvent"  v-if ="isReady"  :msg-val="chilLat"/>
                  <!-- <el-input v-model="ruleForm.lat"></el-input> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="端口" prop="port">
                  <el-input v-model="ruleForm.port"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="通道号" prop="channel">
                  <el-input v-model="ruleForm.channel"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="ruleForm.remark"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="Footer" style="position: relative;z-index: 9999;text-align: center">
          <el-button @click="submitForm('ruleForm')" class="dialogBtn" type="primary">确定</el-button>
          <el-button @click="cancel" class="dialogBtn" type="primary" >取消</el-button>
        </div>
      </Dialog>
      <!--  查看    -->
      <Dialog :is-show-dialog="this.isShowUpdataDialog" @close="close" title="详情">
        <div slot="content">
          <div class="seeContent">
            <div class="seeImg">
              <img :src="seeData.filePath" alt="">
            </div>
            <div class="seeInfo">
              <div class="seeItem">
                <div class="seeTitle">{{seeData.t1Val}}</div>
                <div class="seeSpeed">
                  <el-progress :stroke-width="10" :percentage="Number(Number(seeData.t1Prob).toFixed(2))"></el-progress>
                </div>
              </div>
              <div class="seeItem">
                <div class="seeTitle">{{seeData.t2Val}}</div>
                <div class="seeSpeed">
                  <el-progress :stroke-width="10" :percentage="Number(Number(seeData.t2Prob).toFixed(2))"></el-progress>
                </div>
              </div>
              <div class="seeItem">
                <div class="seeTitle">{{seeData.t3Val}}</div>
                <div class="seeSpeed">
                  <el-progress :stroke-width="10" :percentage="Number(Number(seeData.t3Prob).toFixed(2))"></el-progress>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div slot="Footer" style="position: relative;z-index: 9999;text-align: center">
          <el-button @click="isShowUpdataDialog = false" class="dialogBtn" type="primary">关闭</el-button>
        </div>
      </Dialog>
      <!--  删除    -->
      <Dialog :is-show-dialog="this.isShowDeleteDialog" @close="close" title="删除信息">
        <div slot="content">
          确定删除识别信息
        </div>
        <div slot="Footer" style="position: relative;z-index: 9999;text-align: center">
          <el-button @click="deleteVideo" class="dialogBtn" type="primary">确定</el-button>
          <el-button @click="isShowDeleteDialog = false" class="dialogBtn" type="primary">取消</el-button>
        </div>
      </Dialog>
    </div>
  </div>
</template>

<script>
import Dialog from '../../../components/Dialog'
import Pagination from '../../../components/Pagination'
import {DistinguishModel} from '../../../api/distinguish/distinguishModelApi'
import LonLat from '../../../components/LatLon'
let distinguishModel = new DistinguishModel()
export default {
  name: 'distinguishData',
  components: {
    Dialog, Pagination,LonLat
  },
  data () {
    return {
      userSelect: [],
      userId: '',
      seeData: {},
      total: '',
      searchName: '',
      pageSize: 10,
      pageIndex: 1,
      // 新增弹出框
      ruleForm: {
        name: '',
        sortNo: '', // 排序号
        ip: '',
        address: '', // 流地址
        loginName: '', // 账号
        password: '', // 密码
        lon: '', // 经度
        lat: '', // 纬度
        port: '', // 端口
        channel: '', // 通道号
        remark: '' // 备注
      },
      rules: {
        name: [
          { required: true, message: '请输入视频名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        ip: [
          { required: true, message: '请填写IP', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请填写流地址', trigger: 'change' }
        ],
        loginName: [
          { required: true, message: '请填写账号', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'change' }
        ],
        port: [
          { required: true, message: '请填写端口号', trigger: 'change' }
        ],
        channel: [
          { required: true, message: '请填写通道号', trigger: 'blur' }
        ]
      },
      // 修改弹出框
      upDataForm: {

      },
      isShowAddDialog: false,
      isShowUpdataDialog: false,
      isShowDeleteDialog: false,
      // 表格样式
      cellStyle: {height: '60px', fontSize: '16px'},
      HeaderStyle: {height: '70px', fontSize: '16px'},
      searchFrom: {
        name: ''
      },
      addTableData: [],
      currentRow: null,
      deleteId: '',
      chilLon:'',
      chilLat:'',
      isReady:false
    }
  },
  created () {
    this.getVideoData()
    this.getUserData()
  },
  methods: {
     //经度
    lonEvent(val){
      this.ruleForm.lon = val;
    },

    latEvent(val){
      this.ruleForm.lat = val;
    },
    async getVideoData () {
      this.addTableData = []
      let videoResult = await distinguishModel.getFindPage({
        'discernId': this.userId,
        'pageIndex': this.pageIndex,
        'pageSize': this.pageSize
      })
      console.log(videoResult)
      if (videoResult.status === 200 && videoResult.data.result.rows.length > 0) {
        this.addTableData = videoResult.data.result.rows
        this.total = videoResult.data.result.totalCount
      }
    },
    handleCurrentChange (index) {
      this.pageIndex = index
      this.getVideoData()
    },
    cancel () {
      this.isShowAddDialog = false
      this.isReady = false;
      this.$refs.lonRef.initData();
      this.$refs.latRef.initData();
    },
    close (data) {
      this.isShowAddDialog = data
      this.isShowUpdataDialog = data
      this.isShowDeleteDialog = data
    },
    showAddDialog () {
      this.isShowAddDialog = true
      this.isReady = true
    },
    findWeatherStationList () {

    },
    // 修改弹出框
    upData (data) {
      this.isShowUpdataDialog = true
      console.log(data)
      this.seeData = data
    },
    // 删除
    showDeleteDialog (data) {
      this.isShowDeleteDialog = true
      this.deleteId = data.id
    },
    async deleteVideo () {
      let deleteResult = await distinguishModel.deleteDistinguish(this.deleteId)
      if (deleteResult.status === 200) {
        this.isShowDeleteDialog = false
        this.$message({
          message: '成功删除一个视频信息',
          type: 'success'
        })
        this.getVideoData()
      }
    },
    async searchVideo () {
      console.log(this.userId)
      if (this.userId) {
        this.getVideoData()
      } else {
        this.$message({
          message: '请选择识别人的名字',
          type: 'warning'
        })
      }
    },
    async getUserData () {
      let userResult = await distinguishModel.getUserList()
      if (userResult.status === 200 && userResult.data.result.length > 0) {
        this.userSelect = userResult.data.result
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .container {
    height: 100%;
    padding: 0 2%;
  }
  .el-inputs{
    background-color: #32f1ff16;
    border: 1px solid #FFF;border-radius: 4px;
  }
  .header {
    height: 45px;
    display: flex;
    flex-direction: row;
    margin: 30px 0 20px 0;
    .handle {
      width: 80px;
      margin-left: 5px;
      margin-right: 50px;
    }
    .btn {
      width: 80px;
      cursor: pointer;
      border: none;
      padding: 10px;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      background: rgba(14, 107, 183, 0.9);
      margin-left: 35px;
      border-right: 0;
    }
    .search {
      /*width: 350px;*/
      height: 45px;
      font-size: 22px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      /*border: 1px solid #0E6BB7;*/
      .p-frame {
        -webkit-appearance: none;
        background-color: transparent;
        background-image: none;
        border-radius: 0;
        color: #FFF;
      }
      & /deep/ .el-input__inner  {
        color: #FFFFFF;
        font-size: 1.5rem;
        height: 45px;
        background-color: transparent;
        border: 1px solid #0E6BB7;
        outline: 0;
        border-radius: 0;
      }
    }
  }
  .pagination{
    margin-top: 5px;
  }
  .seeContent{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .seeImg{
      width: 400px;
      height: 300px;
      margin-bottom: 20px;
      img{
        height: 100%;
        width: 100%;
        object-fit: fill;
      }
    }
    .seeItem {
      width: 400px;
      display: flex;
      margin-bottom: 5%;
    }

    .seeTitle {
      width: 30%;
      font-size: 14px;
      color: white;
    }

    .seeSpeed {
      width: 70%;

      /*& /deep/ .el-progress-bar {*/
      /*  width: 90%;*/
      /*}*/
      & /deep/ .el-progress-bar__outer{
        width: 90%;
      }
      & /deep/ .el-progress__text{
        width: 10%;
      }
    }
  }

</style>
